<template>
  <div class="demo-content">
    <!-- 地图容器 -->
    <div id="map-container"></div>
    <!-- 搜索框 -->
    <!-- <SelectBox :searchResults="searchResults" @select="selectResult" /> -->
    <!-- 弹窗 -->
    <!-- <Popup :position="positionObj" v-if="PopupShow" /> -->
    <!-- 筛选框 -->
    <!-- <filterBox /> -->
    <!-- 左上角图表 -->
    <!-- <leftTop /> -->
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from "vue";
//   import SelectBox from "./components/SelectBox.vue";
//   import leftTop from "./components/leftTop.vue";
//   import filterBox from "./components/filterBox.vue";
//   import Popup from "./components/Popup.vue";
  import AMapLoader from "@amap/amap-jsapi-loader";

  window._AMapSecurityConfig = {
    securityJsCode: "3dc2c7ce241e58109ee5c7128f943052", // 高德地图安全密钥
  };
  // 弹框显隐
  const PopupShow = ref(false);

  // 存储当前位置信息
  const positionObj = ref({
    left: 0,
    top: 0,
  });
  const searchResults = ref([]); // 存储搜索结果
  let map = null; // 保存地图实例
  let infoWindow = null; // 保存弹窗实例
  // 加载高德地图和插件
  onMounted(() => {
    AMapLoader.load({
      key: "c8575907371bf1ca141610febb2013b7", // 高德地图的API key
      version: "2.0",
      plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 加载自动补全和地点搜索插件
    })
      .then(AMap => {
        // 创建地图实例
        map = new AMap.Map("map-container", {
          zoom: 16,
          zooms: [5, 20], // 设置地图的缩放级别范围
          center: [116.397428, 39.90923], // 设置地图的中心点
          resizeEnable: true,
        });
        // 创建信息窗口
        infoWindow = new AMap.InfoWindow({
          isCustom: true, // 使用自定义窗体
          content: "",
          offset: new AMap.Pixel(0, 0), // 弹窗偏移量
          anchor: "top-left", // 弹窗锚点
          closeWhenClickMap: true, // 点击地图关闭弹窗
        });

        // 自定义图片标记
        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.397457, 39.909188), // 标记位置
          icon: new AMap.Icon({
            image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 自定义图片
            size: new AMap.Size(19, 31),
          }),
          offset: new AMap.Pixel(-8.5, -31), // 设置偏移量
          // draggable: true, // 启用拖动
        });

        marker.on("click", e => {
          // openPopup(e); // 打开自定义弹窗
          // 设置弹窗内容
          infoWindow.setContent("<div class='popup-box'>这里是弹窗内容2！</div>");
          infoWindow.open(map, e.target.getPosition());
        });

        map.on("click", e => (PopupShow.value = false));

        marker.setMap(map); // 将标记添加到地图上

        // 加载插件并初始化
        AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], () => {
          let autoComplete = new AMap.AutoComplete({ input: "tipinput" });
          let placeSearch = new AMap.PlaceSearch({
            map: map,
          }); //构造地点查询类
          autoComplete.on("select", e => {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name); //关键字查询查询
          }); //注册监听，当选中某条记录时会触发
        });
      })
      .catch(error => {
        console.error("加载高德地图或插件失败:", error);
      });
  });

  // 选择搜索结果，跳转到指定地点
  const selectResult = result => {
    if (map) {
      map.setCenter(result.location); // 跳转到选中的地点
      searchResults.value = []; // 隐藏搜索结果
    } else {
      console.error("地图实例未初始化");
    }
  };

  // 打开弹窗
  const openPopup = e => {
    PopupShow.value = true;
    let x = e.pixel.x + 20 + "px";
    let y = e.pixel.y + 20 + "px";
    positionObj.value = {
      left: x,
      top: y,
    };
  };
  onUnmounted(() => {});
</script>

<style scoped lang="scss">
  .demo-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    #map-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
  :deep(.popup-box) {
    width: 200px;
    height: 100px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
</style>
